{layout name="layout"}
<table class="layui-hide" id="demo" lay-filter="test"></table>

<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="look">查看</a>
	<a class="layui-btn layui-btn-success layui-btn-xs" lay-event="doRead">已读</a>
</script>


<script>
    window.onload = () => {
        layui.config({
            base: '/static/layui/ext/'
        }).use('tableSelect');

        layui.use(["tableSelect"], function () { //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
            //得到各种内置组件
            var layer = layui.layer //弹层
                ,
                laypage = layui.laypage //分页
                ,
                laydate = layui.laydate //日期
                ,
                table = layui.table //表格
                ,
                carousel = layui.carousel //轮播
                ,
                upload = layui.upload //上传
                ,
                element = layui.element //元素操作
                ,
                slider = layui.slider //滑块
                ,
                dropdown = layui.dropdown //下拉菜单
                , form = layui.form
                , tableSelect = layui.tableSelect;

            //执行一个 table 实例
            table.render({
                elem: '#demo',
                url: "{:url('/member/msg/listmymsg')}" //数据接口
                ,
                page: true //开启分页
                ,
                cols: [
                    [ //表头
                        {
                            type: 'checkbox',
                            fixed: 'left'
                        }, {
                            field: 'id',
                            title: '#',
                            width: 80,
                            sort: true,
                            fixed: 'left'
                        }, {
                            field: 'sender_name',
                            title: '发送人'
                        },
                        {
                            field: 'receiver_name',
                            title: '收件人'
                        },
                        {
                            field: 'is_read',
                            title: '状态',
                            templet:(data)=>{
                                if(data.is_read == 0){
                                    return "未读";
                                }else{
                                    return "已读";
                                }
                            }
                        },
                        {
                            field: 'content',
                            title: '消息内容'
                        },
                        {
                            field: 'create_time',
                            title: '发送时间'
                        },
                        {
                            fixed: 'right',
                            width: 150,
                            align: 'center',
                            toolbar: '#barDemo'
                        }
                    ]
                ]
            });

        

            //监听行工具事件
            table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    ,
                    layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'look') {
                    let layero = layer.open({
                        type: 1,
                        area: ['50%', '60%'], // 宽高
                        content: "<div style='padding:10px'>"+data.content+"</div>",
                        
                    });

                } else if (layEvent === 'doRead') {
                    let id = data.id;
                    
                    $.ajax({
                        url: "{:url('/member/msg/doRead')}",
                        data: { id },
                        type: "post",
                        success: res => {
                            if (res.code === 0) {
                                layer.msg(res.msg, { icon: 1 });
                                table.reload("demo");
                            } else {
                                layer.msg(res.msg, { icon: 2 });
                            }
                        }
                    });
                }
                else if (layEvent === 'more') {
                    //下拉菜单
                    dropdown.render({
                        elem: this //触发事件的 DOM 对象
                        ,
                        show: true //外部事件触发即显示
                        ,
                        data: [{
                            title: '编辑',
                            id: 'edit'
                        }, {
                            title: '删除',
                            id: 'del'
                        }],
                        click: function (menudata) {
                            if (menudata.id === 'del') {
                                layer.confirm('真的删除行么', function (index) {
                                    obj.del(); //删除对应行（tr）的DOM结构
                                    layer.close(index);
                                    //向服务端发送删除指令
                                });
                            } else if (menudata.id === 'edit') {
                                layer.msg('编辑操作，当前行 ID:' + data.id);
                            }
                        },
                        align: 'right' //右对齐弹出（v2.6.8 新增）
                        ,
                        style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
                    })
                }
            });




        });

    };
</script>